<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>智慧校园后台管理-登陆</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<link rel="stylesheet" href="resources/lib/layui-v2.5.5/css/layui.css" media="all">
		<style>
			html, body {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        body {
            background: #009688;
        }

        body:after {
            content: '';
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -o-filter: blur(3px);
            -ms-filter: blur(3px);
            filter: blur(3px);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        .layui-container {
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .admin-login-background {
            width: 360px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 40%;
            margin-left: -180px;
            margin-top: -100px;
        }

        .logo-title {
            text-align: center;
            letter-spacing: 2px;
            padding: 14px 0;
        }

        .logo-title h1 {
            color: #009688;
            font-size: 25px;
            font-weight: bold;
        }

        .login-form {
            background-color: #fff;
            border: 1px solid #fff;
            border-radius: 3px;
            padding: 14px 20px;
            box-shadow: 0 0 8px #eeeeee;
        }

        .login-form .layui-form-item {
            position: relative;
        }

        .login-form .layui-form-item label {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2;
        }

        .login-form .layui-form-item input {
            padding-left: 36px;
        }

        .captcha {
            width: 60%;
            display: inline-block;
        }

        .captcha-img {
            display: inline-block;
            width: 34%;
            float: right;
        }

        .captcha-img img {
            height: 34px;
            border: 1px solid #e6e6e6;
            height: 36px;
            width: 100%;
        }
    </style>
	</head>
	<body>
		<div class="layui-container">
			<div class="admin-login-background">
				<div class="layui-form login-form">
					<form class="layui-form" action="">
						<div class="layui-form-item logo-title">
							<h1>智慧校园后台登录</h1>
						</div>
						<div class="layui-form-item">
							<label class="layui-icon layui-icon-username" for="username"></label>
							<input type="text" name="username" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input"
							 value="system">
						</div>
						<div class="layui-form-item">
							<label class="layui-icon layui-icon-password" for="password"></label>
							<input type="password" name="password" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input"
							 value="123456">
						</div>
					<div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" name="captcha" lay-verify="required" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha" value="xszg">
                    <div class="captcha-img">
                        <img id="captchaPic" onclick="genCode()" >
                    </div>
                </div>
						<div class="layui-form-item">
							<input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
						</div>
						<div class="layui-form-item">
							<button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		
		<script src="resources/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="resources/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="resources/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
		<script src="resources/lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="resources/lib/common/common.js" charset="utf-8"></script>
		
		<script>	 
		//写验证码
		var keyCode=Math.floor(Math.random() * 9000 + 1000);
		 $("#captchaPic").attr("src",api+'login/captcha?codeKey='+keyCode)
		 
		function genCode(){
			keyCode=Math.floor(Math.random() * 9000 + 1000);
			$("#captchaPic").attr("src",api+'login/captcha?codeKey='+keyCode)
		}
			layui.use(['form'], function() {
				var form = layui.form,
					layer = layui.layer;

				// 登录过期的时候，跳出ifram框架
				if (top.location != self.location) top.location = self.location;

				// 粒子线条背景
				$(document).ready(function() {
					$('.layui-container').particleground({
						dotColor: '#5cbdaa',
						lineColor: '#5cbdaa'
					});
				});


				// 进行登录操作
				form.on('submit(login)', function(data) {
					var btn = $(this);
					btn.text("登 入 中...").attr("disabled", "disabled").addClass("layui-disabled");
					$.ajax({
						url:api+"login/doSysLogin",
						method: "post",
						data: {
							loginname:data.field.username,password:data.field.password,captcha:data.field.captcha,keyCode:keyCode
						},
						success: function(res) {
							layer.msg(res.msg);
							if (res.code != 200) {
								btn.text("登 入").attr("disabled", false).removeClass("layui-disabled");
							} else {
								//把token写到cookie
								$.cookie('TOKEN', res.token.token, { expires: 7 }); //登陆成功这后把token放到cookie里面
								 //登陆成功这后把token放到cookie里面
								localStorage.setItem("permissions",res.token.permissions);
								localStorage.setItem("usertype",res.token.usertype);
								localStorage.setItem("username",res.token.username);
								if(window.location.href != loginUrl){
									window,location.href=loginUrl;
								}else{
									window,location.href=indexUrl;
								}	
							}
						},
						error: function() {
							// alert(data.code)
							// alert("登陆失败");
							layer.msg("登录失败")
							if(window.location.href != loginUrl){
								window,location.href=loginUrl;
							}
							btn.text("登 入").attr("disabled", false).removeClass("layui-disabled");
						}
					})
					return false;
				});
			});
		</script>
	</body>
</html>
